<template>
  <el-card class="top">
    <div class="left">
      <b class="font20">社团成员管理</b>
    </div>

    <div class="right">
      <el-form class="myform" :model="searchForm">
        <div class="search-box">
          <div class="top">
            <el-form-item label="姓名">
              <el-input v-model="searchForm.memberName"></el-input>
            </el-form-item>

            <el-form-item label="学院">
              <el-input v-model="searchForm.college"></el-input>
            </el-form-item>

            <el-form-item label="所在社团">
              <el-input v-model="searchForm.organization"></el-input>
            </el-form-item>
          </div>
        </div>
      </el-form>

      <div class="btns">
        <el-button class="reset-btn" @click="handleReset">重置</el-button>
        <el-button type="primary" @click="handleSearch">查询</el-button>
      </div>
    </div>
  </el-card>
</template>

<script lang="ts" setup>
import { reactive } from "vue";
import lodash from "lodash";

import OrganizationOption from "@/components/common/OrganizationOption.vue";

import { options } from "@/data/select.ts";

const props = defineProps(["searchForm"]);
const emits = defineEmits(["search"]);

const sexOptions = lodash.cloneDeep(options["性别"]);

{
  sexOptions.unshift({
    label: "全部",
    value: "",
  });
}

const handleReset = function () {
  for (const item in props.searchForm) {
    props.searchForm[item] = "";
  }
};

const handleSearch = () => {
  emits("search");
};
</script>

<style lang="less" scoped>
.top {
  // height: 500px;

  :deep(.el-card__body) {
    display: flex;
    justify-content: space-between;
    min-width: 1080px;
  }

  :deep(.el-form-item__content) {
    width: 160px;
  }

  .left {
    display: flex;
    justify-content: center;
    align-items: center;

    :deep(.el-breadcrumb) {
      height: 32px;
      line-height: 32px;
    }
  }

  .right {
    display: flex;

    .myform {
      display: flex;
      margin-right: 40px;
      // min-width: 970px;

      .search-box {
        display: flex;
        flex-direction: column;

        .top,
        .bottom {
          display: flex;
          justify-content: space-between;

          :deep(.el-form-item) {
            margin: 10px 0 10px 20px;
          }
        }

        .bottom {
          margin: 0;
          :deep(.el-form-item) {
            margin-bottom: 0;
          }
        }
      }
      // .organization {
      //   margin-left: 20px;
      //   margin-right: 20px;
      // }

      .reset-btn {
        margin-left: 20px;
      }
    }

    .btns {
      display: flex;
      justify-content: center;
      align-items: center;

      :deep(.el-button) {
        font-size: 16px;
        padding: 20px;
      }
    }
  }
}
</style>
